<!-- vue文件 index.vue -->
<template>
    <svg :class="svgClass" aria-hidden="true" :style="svgStyle">
        <use :xlink:href="iconName" :fill="color" />
    </svg>
</template>
  
<script setup lang="ts">
import { computed } from 'vue';
const props = withDefaults(defineProps<{
    name: string,
    className?: string,
    color?: string,
    size?: number | string
}>(), {
    className: '',
    color: '',
    size: 1
})

const iconName = computed(() => `#icon-${props.name}`)
const svgClass = computed(() => props.className ? `svg-icon ${props.className}` : 'svg-icon')
const svgStyle = computed(() => {
    return {
        width: `${props.size}em`,
        height: `${props.size}em`
    }
})
</script>
<script lang="ts">
export default {
    name: 'SvgIcon',
}
</script>
<style  scoped>
.svg-icon {
    position: relative;
    fill: currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
  